import {useDeferredValue, useState, useTransition} from "react";
import namesArray from "./nameArray";

export function Filter() {
    const [arr, setArr] = useState(namesArray);
    const deferredArr = useDeferredValue(arr);
    const onInput = (event) => {
        const filteredArr = namesArray.filter(item => item.includes(event.target.value))
        setArr(filteredArr);
    }

    return (
        <div>
            <input onInput={onInput}/>
            <div>用户列表:</div>
            <ul>
                {
                    deferredArr.map((item, index) => <li key={index}>{item}</li>)
                }
            </ul>
        </div>
    )
}